<template>
    <el-header>
		<div class="logo">
			<div class="weamLogo">
                <img src="/src/assets/indexStatic/images/index/u304.svg"/>
            </div>
            <div class="weam">
                <span>WEAM</span>
            </div>
            <router-link to="/">
                <div class="hotspot"></div>
            </router-link>
		</div>

		<div class="menu">
			<div class="menu_left">
				<router-link to="/MainMap">
					<img class="mapImg" src="/src/assets/img/MainMap/mapImg.svg"/>
				</router-link>
				<a href="https://www.cumtb.edu.cn/" target="view_window">
					<img class="linkImg" src="/src/assets/img/MainMap/linkImg.svg"/>
				</a>
			</div>
			
			<el-dropdown trigger="click" @command="handleCommand">
				<!-- <img class="userImg" src="userPhoto"/> -->
                <el-avatar v-if="userPhoto" :size="40" :src="userPhoto" class="userImg"></el-avatar>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item command="toPersonal">个人中心</el-dropdown-item>
						<el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
						<el-dropdown-item command="logout">注销</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
    </el-header>


    <el-dialog v-model="dialogFormVisible" title="修改密码" width="395px" :destroy-on-close='true'>
        <el-form :model="form">
            <el-form-item>
                <el-input v-model="form.oldPassword" autocomplete="off" placeholder="请输入原密码" clearable show-password>
                    <template #prefix>
                        <i class="iconfont icon-suo"></i>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="form.newPassword" autocomplete="off" placeholder="请输入新密码" clearable show-password>
                    <template #prefix>
                        <i class="iconfont icon-suo"></i>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="form.reNewPassword" autocomplete="off" placeholder="请重复新密码" clearable show-password>
                    <template #prefix>
                        <i class="iconfont icon-mima"></i>
                    </template>
                </el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确认</el-button>
            </span>
        </template>
    </el-dialog>

</template>

<script>
import { ElMessage } from 'element-plus'
export default {
    data(){
        return{
            dialogFormVisible: false,
            userPhoto: 'http://weam.oss-cn-beijing.aliyuncs.com/userPhoto/1452535637748191233.jpg',
            form: {
                oldPassword: "",
                newPassword: "",
                reNewPassword:"",
            }
        }
    },
    components:{
        
    },
    methods:{
        handleCommand(command){
            switch(command){
                case 'toPersonal':
                    this.$router.push({path: '/Personal'})
                    break;
                case 'changePassword':
                    this.dialogFormVisible = true;
                    break;
                case 'logout':
                    ElMessage({
                        message: '注销成功',
                        type: 'success',
                        duration: 1000
                    })
                    this.$router.push({path: '/'})
                    break;
            }
            
        }
    }
}
</script>

<style>
.el-header{
	width: 100%;
    height: 50px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
    border-bottom: 1px solid #eee;
    box-shadow: var(--el-box-shadow-base);
    z-index: 999;
}
.logo{
	margin-left: 50px;
	display: flex;
}
.logo .hotspot{
	width: 140px;
	height: 50px;
	top: 0px;
	left: 72px;
	position: absolute;
	/* border: 1px solid #eee; */
}
.logo .weamLogo{
	width: 48px;
}
.logo .weamLogo img{
	width: 48px;
    height: 100%;
}
.logo .weam{
	margin-top: 8px;
}
.menu{
	display: flex;
	justify-content: space-between;
	width: 250px;
    height: 50px;
	margin-right: 50px;
}
.menu .userImg{
  	width: 40px;
	height: 100%;
    margin-top: 5px;
}
.menu .userImg:hover{
    cursor:pointer;
}
.menu .menu_left{
	width: 120px;
	display: flex;
	justify-content: space-between;
}
.menu .menu_left .mapImg{
	width: 36px;
	margin-top: 6px;
}
.menu .menu_left .linkImg{
	width: 40px;
	margin-top: 5px;
}
.el-dialog{
    border-radius: 25px;
    height: 300px;
    margin-top: 25vh;
}
.el-dialog__body{
    padding: 10px 20px 0px 20px;
}
.el-dialog__footer{
    padding: 0px;
    height: 60px;
    text-align: center;
}
.icon-suo{
    margin-left: 3px;
    padding: 0px;
    font-size: 16px;
}
.icon-mima{
    margin-left: 3px;
    padding: 0px;
    font-size: 16px;
}
.el-input__inner{
    height: 40px;
    margin-bottom: 0px;
}
</style>